import { css } from './styles.js';
import { 
    render, 
    bindEvents, 
    initializeData,
    handleAttributeChange,
    autoPlayMusic
} from './scripts.js';

class VideoInfo extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        
        // 初始化数据
        initializeData(this);

        // 渲染组件
        render(this.shadowRoot, css, this.data);
        bindEvents(this);
        
        // 初始化完成后尝试自动播放音乐
        setTimeout(() => {
            autoPlayMusic(this);
        }, 100);
    }

    // 监听属性变化
    static get observedAttributes() {
        return ['author', 'author-avatar', 'title', 'description', 'hashtags', 'following', 'verified', 'background-music', 'background-music-name'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            handleAttributeChange(this, name, newValue);
            render(this.shadowRoot, css, this.data);
            bindEvents(this);
        }
    }
}

window.customElements.define('video-info', VideoInfo);